<template>
    <div>
        <el-form ref="form" :model="form" label-width="280px">
            <div class="outmain ba_f mar_t20">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="同城配送" name="tcps"></el-tab-pane>
                    <el-tab-pane label="配送区域" name="psqy"></el-tab-pane>
                </el-tabs>
                <div class="shuju_title mar_b20 mar_t20">
                    <div class="shuju_title_text">
                        <span>同城配送</span>
                    </div>
                </div>
                <div class="ba_f59 pad_20 flex-bet">
                    <div class="">
                        <div class="wei fon_14">商家配送</div>
                        <div class="mar_t10">商家配送</div>
                    </div>
                    <div class="">
                        <el-switch v-model="form.storeOpen" active-value="1" inactive-value="2"></el-switch>
                    </div>
                </div>
                <div v-show="deliveryShow.dadaOpen && deliveryShow.dadaOpen =='1'">
                    <div class="ba_f59 pad_20 flex-bet mar_t20">
                        <div class="">
                            <div class="wei fon_14">达达配送</div>
                            <div class="mar_t10">达达配送</div>
                        </div>
                        <div class="">
                            <el-switch v-model="form.dadaOpen" active-value="1" inactive-value="2"></el-switch>
                        </div>
                    </div>
                    <div v-if="form.dadaOpen=='1'" class="mar_t20">
                        <el-form-item label="商家ID" :required="true">
                            <el-input v-model="form.dadaShopId" placeholder="请输入商家ID"></el-input>
                        </el-form-item>
                        <el-form-item label="Appkey" :required="true">
                            <el-input v-model="form.dadaAppKey" placeholder="请输入Appkey"></el-input>
                        </el-form-item>
                        <el-form-item label="AppSecret" :required="true">
                            <el-input v-model="form.dadaAppSecret"
                                      placeholder="请输入AppSecret"></el-input>
                        </el-form-item>
                        <el-form-item label="商家门店编号" :required="true">
                            <el-input v-model="form.dadaShopNo" placeholder="请输入商家门店编号"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div v-show="deliveryShow.dwdOpen && deliveryShow.dwdOpen =='1'">
                    <div class="ba_f59 pad_20 flex-bet mar_t20">
                        <div class="">
                            <div class="wei fon_14">点我达</div>
                            <div class="mar_t10">点我达</div>
                        </div>
                        <div class="">
                            <el-switch v-model="form.dwdOpen" active-value="1" inactive-value="2"></el-switch>
                        </div>
                    </div>
                    <div v-if="form.dwdOpen=='1'" class="mar_t20">
                        <el-form-item label="Token" :required="true">
                            <el-input v-model="form.dwdToken" placeholder="请输入商家Token"></el-input>
                        </el-form-item>
                        <el-form-item label="Appkey" :required="true">
                            <el-input v-model="form.dwdAppKey" placeholder="请输入Appkey"></el-input>
                        </el-form-item>
                        <el-form-item label="AppSecret" :required="true">
                            <el-input v-model="form.dwdAppSecret" placeholder="请输入AppSecret"></el-input>
                        </el-form-item>
                        <el-form-item label="商家门店编号" :required="true">
                            <el-input v-model="form.dwdStoreNo" placeholder="请输入商家门店编号"></el-input>
                            <div class="yb_margin lh16">回调url地址：<span class="color_3">{{form.dianCallBack}}</span></div>
                        </el-form-item>
                    </div>
                </div>
                <div v-show="deliveryShow.makeOpen && deliveryShow.makeOpen =='1'">
                    <div class="ba_f59 pad_20 flex-bet mar_t20">
                        <div class="">
                            <div class="wei fon_14">{{form.makeName || '码科配送'}}</div>
                            <div class="mar_t10">{{form.makeName || '码科配送'}}</div>
                        </div>
                        <div class="">
                            <el-switch v-model="form.makeOpen" active-value="1" inactive-value="2"></el-switch>
                        </div>
                    </div>
                    <div v-if="form.makeOpen=='1'" class="mar_t20">
                        <el-form-item  :required="true">
                            <span slot="label">{{form.makeName}}Url </span>
                            <el-input v-model="form.makeUrl" placeholder="请输入Url">
                                <template slot="prepend">https://</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item  :required="true">
                            <span slot="label">{{form.makeName}}Token </span>
                            <el-input v-model="form.makeToken" placeholder="请输入Token"></el-input>
                        </el-form-item>
                        <el-form-item  :required="true">
                            <span slot="label">{{form.makeName}}AppId </span>
                            <el-input v-model="form.makeAppId" placeholder="请输入AppId"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div v-show="deliveryShow.sfOpen && deliveryShow.sfOpen =='1'">
                    <div class="ba_f59 pad_20 flex-bet mar_t20">
                        <div class="">
                            <div class="wei fon_14">顺丰同城</div>
                            <div class="mar_t10">顺丰同城</div>
                        </div>
                        <div class="">
                            <el-switch v-model="form.sfOpen" active-value="1" inactive-value="2"></el-switch>
                        </div>
                    </div>
                    <div v-if="form.sfOpen=='1'" class="mar_t20">
                        <el-form-item label="顺丰AppId" :required="true">
                            <el-input v-model="form.sfAppId" placeholder="请输入顺丰AppId"></el-input>
                        </el-form-item>
                        <el-form-item label="Appkey" :required="true">
                            <el-input v-model="form.sfAppKey" placeholder="请输入顺丰Appkey"></el-input>
                        </el-form-item>
                        <el-form-item label="顺丰StoreId" :required="true">
                            <el-input v-model="form.sfStoreId" placeholder="请输入顺丰StoreId"></el-input>
                            <div class="yb_margin lh16">回调url地址：<span class="color_3">{{form.sfcallBack}}</span></div>
                        </el-form-item>
                    </div>
                </div>
                <div v-show="deliveryShow.fnOpen && deliveryShow.fnOpen =='1'">
                    <div class="ba_f59 pad_20 flex-bet mar_t20">
                        <div class="">
                            <div class="wei fon_14">蜂鸟即配</div>
                            <div class="mar_t10">蜂鸟即配</div>
                        </div>
                        <div class="">
                            <el-switch v-model="form.fnOpen" active-value="1" inactive-value="2"></el-switch>
                        </div>
                    </div>
                    <div v-if="form.fnOpen=='1'" class="mar_t20">
                        <el-form-item label="蜂鸟AppId" :required="true">
                            <el-input v-model="form.fnAppId" placeholder="请输入蜂鸟AppId"></el-input>
                        </el-form-item>
                        <el-form-item label="Appkey" :required="true">
                            <el-input v-model="form.fnAppKey" placeholder="请输入Appkey"></el-input>
                        </el-form-item>
                        <el-form-item label="蜂鸟StoreId" :required="true">
                            <el-input v-model="form.fnStoreId" placeholder="请输入蜂鸟StoreId"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div v-show="deliveryShow.ssOpen && deliveryShow.ssOpen =='1'">
                    <div class="ba_f59 pad_20 flex-bet mar_t20">
                        <div class="">
                            <div class="wei fon_14">闪送</div>
                            <div class="mar_t10">闪送</div>
                        </div>
                        <div class="">
                            <el-switch v-model="form.ssOpen" active-value="1" inactive-value="2"></el-switch>
                        </div>
                    </div>
                    <div v-if="form.ssOpen=='1'" class="mar_t20">
                        <el-form-item label="商户ID" :required="true">
                            <el-input v-model="form.ssShopId" placeholder="请输入商户ID"></el-input>
                        </el-form-item>
                        <el-form-item label="闪送App-key" :required="true">
                            <el-input v-model="form.ssAppId" placeholder="请输入闪送App-key"></el-input>
                        </el-form-item>
                        <el-form-item label="闪送App_secret" :required="true">
                            <el-input v-model="form.ssAppKey" placeholder="请输入闪送App秘钥"></el-input>
                            <div class="yb_margin">本系统对接的为商户型API</div>
                            <div class="yb_margin lh16">回调url地址：<span class="color_3">{{form.sscallBack}}</span></div>
                        </el-form-item>
                    </div>
                </div>
                <div v-show="deliveryShow.uuOpen && deliveryShow.uuOpen =='1'">
                    <div class="ba_f59 pad_20 flex-bet mar_t20">
                        <div class="">
                            <div class="wei fon_14">uu跑腿</div>
                            <div class="mar_t10">uu跑腿</div>
                        </div>
                        <div class="">
                            <el-switch v-model="form.uuOpen" active-value="1" inactive-value="2"></el-switch>
                        </div>
                    </div>
                    <div v-if="form.uuOpen=='1'" class="mar_t20">
                        <el-form-item label="uuOpenId" :required="true">
                            <el-input v-model="form.uuOpenId" placeholder="请输入uuOpenId"></el-input>
                        </el-form-item>
                        <el-form-item label="uuAppId" :required="true">
                            <el-input v-model="form.uuAppId" placeholder="请输入uuAppId"></el-input>
                        </el-form-item>
                        <el-form-item label="uuAppKey" :required="true">
                            <el-input v-model="form.uuAppKey" placeholder="请输入uuAppKey"></el-input>
                        </el-form-item>
                    </div>
                </div>
                <div v-show="deliveryShow.yunbeiOpen && deliveryShow.yunbeiOpen =='1'">
                    <div class="ba_f59 pad_20 flex-bet mar_t20">
                        <div class="">
                            <div class="wei fon_14">{{form.yunbeiName || '云贝配送'}}</div>
                            <div class="mar_t10">{{form.yunbeiName || '云贝配送'}}</div>
                        </div>
                        <div class="">
                            <el-switch v-model="form.yunbeiOpen" active-value="1" inactive-value="2"></el-switch>
                        </div>
                    </div>
                    <div v-if="form.yunbeiOpen=='1'" class="mar_t20">
                        <el-form-item :required="true">
                            <span slot="label">{{form.yunbeiName}}Url </span>
                            <el-input v-model="form.yunbeiUrl" placeholder="请输入Url">
                                <template slot="prepend">https://</template>
                            </el-input>
                        </el-form-item>
<!--                        <el-form-item label="选择版本" :required="true" class="mar_t20">-->
<!--                            <el-radio-group v-model="form.yunbeiedition">-->
<!--                                <el-radio label="1">微擎版</el-radio>-->
<!--                                <el-radio label="2">独立版</el-radio>-->
<!--                            </el-radio-group>-->
<!--                        </el-form-item>-->
                        <el-form-item label="商户编号" :required="true">
                            <el-input v-model="form.yunbeiAppId" placeholder="请输入商户编号"></el-input>
                        </el-form-item>
                        <el-form-item label="AppSecret" :required="true">
                            <el-input v-model="form.yunbeiAppSecret" placeholder="请输入AppSecret"></el-input>
                        </el-form-item>
                        <el-form-item label="AppKey" :required="true">
                            <el-input v-model="form.yunbeiAppKey" placeholder="请输入AppKey"></el-input>
                        </el-form-item>
                    </div>
                </div>
            </div>
            <div class="ba_f pad_20 mar_t20">
                <div class="shuju_title mar_b20">
                    <div class="shuju_title_text">
                        <span>配送设置</span>
                    </div>
                </div>
                <el-form-item label="接单后自动配送" :required="true" class="mar_t20">
                    <el-radio-group v-model="form.automatic">
                        <el-radio label="1">开启</el-radio>
                        <el-radio label="2">关闭</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="优先配送方式" :required="true">
                    <el-radio-group v-model="form.first">
                        <el-radio label="1" v-if="form.storeOpen=='1'">商户配送</el-radio>
                        <el-radio label="2" v-if="form.dadaOpen=='1'">达达配送</el-radio>
                        <el-radio label="3" v-if="form.dwdOpen=='1'">点我达</el-radio>
                        <el-radio label="4" v-if="form.makeOpen=='1'">{{form.makeName}}配送</el-radio>
                        <el-radio label="5" v-if="form.sfOpen=='1'">顺丰同城</el-radio>
                        <el-radio label="6" v-if="form.fnOpen=='1'">蜂鸟即配</el-radio>
                        <el-radio label="7" v-if="form.ssOpen=='1'">闪送</el-radio>
                        <el-radio label="8" v-if="form.uuOpen=='1'">uu跑腿</el-radio>
                        <el-radio label="9" v-if="form.yunbeiOpen=='1'">{{form.yunbeiName}}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备选配送方式" :required="true">
                    <el-checkbox-group v-model="form.alternative">
                    </el-checkbox-group>
                    <el-checkbox-group v-model="form.alternative">
                        <el-checkbox label="1" v-if="form.storeOpen=='1' && form.first!='1'">商户配送</el-checkbox>
                        <el-checkbox label="2" v-if="form.dadaOpen=='1' && form.first!='2'">达达配送</el-checkbox>
                        <el-checkbox label="3" v-if="form.dwdOpen=='1' && form.first!='3'">点我达</el-checkbox>
                        <el-checkbox label="4" v-if="form.makeOpen=='1' && form.first!='4'">{{form.makeName}}配送</el-checkbox>
                        <el-checkbox label="5" v-if="form.sfOpen=='1' && form.first!='5'">顺丰同城</el-checkbox>
                        <el-checkbox label="6" v-if="form.fnOpen=='1' && form.first!='6'">蜂鸟即配</el-checkbox>
                        <el-checkbox label="7" v-if="form.ssOpen=='1' && form.first!='7'">闪送</el-checkbox>
                        <el-checkbox label="8" v-if="form.uuOpen=='1' && form.first!='8'">uu跑腿</el-checkbox>
                        <el-checkbox label="9" v-if="form.yunbeiOpen=='1' && form.first!='9'">{{form.yunbeiName}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </div>
        </el-form>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">保存</el-button>
        </div>
    </div>
</template>
<script>
    import {getStoreConfig, getConfig, postStoreConfig} from "@/api/setup";
    // import {mapState} from "vuex";
    export default {
        created() {
            if (this.$route.query.storeId) {
                this.storeId = this.$route.query.storeId
                this.bus.$emit('loading', true);
                this.init();
            }
        },
        computed: {
            // ...mapState(['storeId']),
        },
        data() {
            return {
                activeName:'tcps',
                storeId:'',
                form: {
                    storeOpen: '2',
                    dadaOpen: '2',
                    dadaShopId: '',
                    dadaShopNo: '',
                    dadaAppKey: '',
                    dadaAppSecret: '',
                    dwdOpen: '2',
                    dwdToken: '',
                    dwdStoreNo: '',
                    dwdAppKey: '',
                    dwdAppSecret: '',
                    makeOpen: '2',
                    makeUrl: '',
                    makeToken: '',
                    makeAppId: '',
                    sfOpen: '2',
                    sfAppId: '',
                    sfAppKey: '',
                    sfStoreId: '',
                    fnOpen: '2',
                    fnAppId: '',
                    fnAppKey: '',
                    fnStoreId: '',
                    ssOpen: '2',
                    ssShopId: '',
                    ssAppId: '',
                    ssAppKey: '',
                    sscallBack: '',
                    uuOpen:'2',
                    uuOpenId: '',
                    uuAppId: '',
                    uuAppKey: '',
                    automatic: '2',
                    first: '1',
                    alternative: [],
                    makeName: '码科配送',
                    yunbeiName: '云贝配送',
                    yunbeiOpen:'2',
                    yunbeiUrl: '',
                    yunbeiedition: '1',
                    yunbeiAppId: '',
                    yunbeiAppSecret: '',
                    yunbeiAppKey: '',
                },
                alternativeOptions: [],
                deliveryShow: '',
            }
        },
        methods: {
            async init() {
                const deliveryData = await getConfig({ident: 'delivery',storeId:this.storeId})
                this.deliveryShow = deliveryData.data
                const {data} = await getStoreConfig({ident: 'deliveryMode',storeId:this.storeId});
                this.form2 = this.form
                this.form = Object.assign( this.form2, data);
                this.bus.$emit('loading', false)
            },
            handleClick(){
                console.log(123,this.activeName)
               if(this.activeName == 'tcps') {
                   this.$router.push(`/storecitydistribution?storeId=${this.storeId}`);
               }else if(this.activeName == 'psqy'){
                   this.$router.push(`/storeregiondistribution?storeId=${this.storeId}`);
               }
            },
            submitForm() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        this.form.ident = 'deliveryMode'
                        this.form.identName = '配送方式'
                        this.form.storeId = this.storeId
                        const {msg} = await postStoreConfig(this.form);
                        this.$baseMessage(msg, "success");
                        this.init();
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
